.SidebarNextSteps {
    width: 100%;
    color: var(--sidebar-text);
    padding: 8px 16px 18px 14px;
    align-self: flex-end;
    position: relative;
    background-color: var(--sidebar-bg);
    cursor: pointer;

    &:hover:not(.active) {
        background-color: rgba(var(--button-color-rgb), 0.08);
    }

    &.active {
        background-color: var(--sidebar-text-hover-bg);

        &::before {
            content: '';
            height: 100%;
            position: absolute;
            left: -2px;
            top: 0;
            width: 4px;
            background: var(--sidebar-text-active-border);
            border-radius: 4px;
        }
    }
}

.SidebarNextSteps__top {
    display: flex;

    span {
        font-weight: 600;
        font-size: 14px;
        line-height: 28px;
    }
}

.SidebarNextSteps__close {
    border: none;
    border-radius: 4px;
    background: none;
    padding: 0;
    margin-left: auto;
    font-size: 14.4px;
    line-height: 14px;

    align-self: center;
    width: 28px;
    height: 28px;

    i {
        color: var(--sidebar-text);
        opacity: 0.72;

        &::before {
            margin: 0;
        }
    }

    &:hover {
        background-color: var(--sidebar-text-hover-bg);

        i {
            opacity: 1;
        }
    }
}

.SidebarNextSteps__middle {
    font-size: 12px;
    line-height: 16px;
}

.SidebarNextSteps__progressBar {
    margin-top: 8px;
    height: 4px;
    border-radius: 4px;
    background-color: var(--sidebar-text-16);

    .ProgressBar {
        border-radius: 4px;
        overflow: hidden;
    }

    .ProgressBar__progress {
        border-radius: 4px;
        background-color: var(--sidebar-text);
    }
}
